import React, { useEffect } from "react";
import { connect } from "react-redux";
import { actions } from "../store/modules/menu/actions";
import { InitState } from "../store/modules/menu";
import * as Cesium from "cesium";
import "./home.css";
const Home = () => {
    useEffect(() => {
        const viewer = new Cesium.Viewer("cesiumContainer", {
            baseLayerPicker: false,
            geocoder: false,
            navigationHelpButton: false,
            animation: false,
            timeline: false,
            fullscreenButton: false,
        });
        viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(115.854844, 28.710076, 10000), // 默认视角
            orientation: {
                heading: Cesium.Math.toRadians(0),
                pitch: Cesium.Math.toRadians(-90),
            },
        });
        viewer.entities.add({
            name: "Rectangle Cube",
            position: Cesium.Cartesian3.fromDegrees(115.8809, 28.7363, 100),
            box: {
                dimensions: new Cesium.Cartesian3(100.0, 100.0, 100.0),
                material: new Cesium.ColorMaterialProperty(Cesium.Color.RED),
            },
        });
        return () => viewer.destroy();
    }, []);
    return <div id="cesiumContainer" />;
};
const mapStateToProps = (state: InitState) => state;
const mapDispatchToProps = {
    ...actions,
};
export default connect(mapStateToProps, mapDispatchToProps)(Home);
